<template>
    <div id="drawer">
        <el-drawer
        v-model="props.modelValue"
        title="I have a nested table inside!"
        direction="rtl"
        size="30%"
        @closed="handleClose"
        @opened="handleOpen"
  >
  <template #header="{ close, titleId, titleClass }">
        <svg class="icon" aria-hidden="true">
            <use :xlink:href="'#'+props.icon"></use>
        </svg>
      <h4 :id="titleId" :class="titleClass">{{ props.title }}</h4>
    </template>
   <slot name="tree"></slot>
  </el-drawer>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { ElDrawer, ElMessageBox } from 'element-plus'

const formLabelWidth = '80px'
let timer

let props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title:{
    type:String,
    default:'分配权限'
  },
  icon:{
    type:String,
    default:'icon-icon-quanxian'
  },
  openedFn:{
    type:Function
  },
})
let emit = defineEmits(['update:modelValue'])
let handleClose = ()=>{
    emit('update:modelValue', false)
}
let handleOpen = ()=>{
    typeof (props['openedFn']) === 'function' && props['openedFn']()
}
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const gridData = [
  {
    date: '2016-05-02',
    name: 'Peter Parker',
    address: 'Queens, New York City',
  },
  {
    date: '2016-05-04',
    name: 'Peter Parker',
    address: 'Queens, New York City',
  },
  {
    date: '2016-05-01',
    name: 'Peter Parker',
    address: 'Queens, New York City',
  },
  {
    date: '2016-05-03',
    name: 'Peter Parker',
    address: 'Queens, New York City',
  },
]


</script>
<style scoped>
:deep(.el-drawer__header>:first-child){
   flex:none;
}
</style>